<!-- user表单弹窗 -->
<form id="shop-form" lay-filter="shop-form"
      class="layui-form model-form">
    <input name="id" type="hidden"/>
    <input name="shopLevel" type="hidden"/>
    <div class="layui-form-item">
    <div class="layui-form-item">
        <label class="layui-form-label">视频名称</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入视频名称" type="text"
                       class="layui-input" maxlength="50" lay-verify="required" required/>
            </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">视频描述</label>
            <div class="layui-input-block">
                <input name="describe" placeholder="请输入视频描述" type="text"
                       class="layui-input"/>
        </div>
    </div>
       
         <div class="layui-form-item">
            <label class="layui-form-label">教学视频</label>
            <div class="layui-input-block">
                <div class="layui-upload-list">
                    <input id="path" name="path" class="layui-hide"/>
                    <video controls width="320" height="240" id="demo1" src="" poster="assets/images/timg.jpg"/>
                    <button type="button" class="layui-btn" id="test1"
                            style="margin-right: 35px;margin-top:-25px;">选择文件
                    </button>
                    
                </div>
            </div>
        </div>
    </div>


    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" type="button"
                ew-event="closeDialog">取消
        </button>
        <button id="videoSubmit" class="layui-btn  layui-btn-disabled" lay-filter="form-submit" lay-submit disabled>保存</button>
    </div>
</form>
<script>
    layui.use(['layer', 'admin', 'form', 'formSelects', 'upload'],
        function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var admin = layui.admin;
            var form = layui.form;
            var upload = layui.upload;
            var formSelects = layui.formSelects;

            form.render('radio');
            form.render('select');

            var url = 'service/video/add';
            // 回显user数据
            var product = admin.getTempData('t_video');
            if (product) {
                $('input[name="id"]').attr('readonly',
                    'readonly');
                url = 'service/shop/update';
                $("input[name=shopStatus][value=0]").attr("checked", product.shopStatus == 0 ? true : false);
                $("input[name=shopStatus][value=1]").attr("checked", product.shopStatus == 1 ? true : false);
                form.val('shop-form', product);
            }

            // 表单提交事件
            form.on('submit(form-submit)', function (data) {
                layer.load(2);
                admin.req(url, data.field, function (data) {
                    layer.closeAll('loading');
                    if (data.code == 1) {
                        layer.msg(data.msg, {
                            icon: 1
                        });
                        location.reload();
                    } else {
                        layer.msg(data.msg, {
                            icon: 2
                        });
                    }
                }, "post");
                return false;
            });
            
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1',
                url: 'service/video/upload/',
                type: 'images',
                accept: 'video',
                size:0,
                acceptMime: 'video/*',
                before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                },
                choose: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file,result) {
                        $('#demo1').attr("src", result);//图片链接（base64）

                    });
                }
                , done: function (data) {
                	layer.closeAll('loading'); //关闭loading
                    if (data.code == 1) {
                    	$("#videoSubmit").attr("disabled",false).removeClass("layui-btn-disabled");
                        $("#path").val(data.data);
                        initialize();
                    } else {
                    	layer.msg(data.data, {
                            icon: 2
                        });
                    }
                }
                , error: function () {
                	layer.closeAll('loading'); //关闭loading
                	layer.msg("视频上传失败", {
                        icon: 2
                    });
                }
            });
            
            var video;
            var scale = 0.3;
            var initialize = function() {
                video = document.getElementById("demo1");
                captureImage();
            };
     
            var captureImage = function() {
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth * scale;
                canvas.height = video.videoHeight * scale;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
     
                $("#demo1").attr("poster",canvas.toDataURL("image/png"));
            };
        });
</script>